<template>
    <div class="container-fluid" style="background: #fff">
        <div class="row page-title">
            <div class="col-xs-11">
                <h1>分类管理</h1>
            </div>
            <div class="col-xs-1">
                <a title="添加"  @click="dialogFormVisible = true;saveType='add';form={}">
                    <el-tooltip content="添加" placement="top">
                        <i class="el-icon-plus"></i>
                    </el-tooltip>
                </a>
            </div>
        </div>
        <el-container>
          <el-aside width="201px" class="nav-bar">
            <el-menu class="el-menu-vertical-demo" @select="handleSelect" :default-active="activeIndex">
                <el-menu-item :index="String($index)" v-for="(item,$index) in tableData" :key="item.Id">
                    <span slot="title">{{item.Name+'-'+item.NameType}}</span>
                </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>             
            <!-- 一级子类表格 -->
            <el-col :span="24" class="table-bottom-margin">
                <el-table :data="tableData2" border style="width: 100%" :header-cell-class-name="headerbg">
                    <el-table-column prop="Name" label="分类名称"></el-table-column>
                    <el-table-column prop="SortNo" label="顺序"> </el-table-column>
                    <el-table-column label="操作" align="center" min-width="40" width="250px">
                        <template slot-scope="scope">
                            <el-tooltip content="编辑" placement="top">
                                <i class="fa fa-edit el-text-blue" @click="Edit(scope.row)"></i>
                            </el-tooltip>&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-tooltip content="删除" placement="top">
                                <i class="fa fa-trash el-text-danger" @click="del(scope.row.Id)"></i>
                            </el-tooltip>&nbsp;&nbsp;&nbsp;&nbsp;     
                            <el-tooltip content="进入绑定" placement="top">
                                <i class="el-icon-caret-right el-text-yellow" @click="into(scope.row)"></i>
                            </el-tooltip>                                                   
                        </template>
                    </el-table-column>
                </el-table>    
            </el-col>
            <el-col :sapn="24" style="text-align:right" v-if="count>0">
                <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="currentPage"
                    :page-sizes="[10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
                </el-pagination>
            </el-col>
          </el-main>
        </el-container>
        <!-- 添加-编辑-一级子分类 -->
        <el-dialog :title="dialogTitleFun" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item class="hr" :label-width="formLabelWidth"></el-form-item>
                 <el-form-item label="子分类名称：" prop="Name" :label-width="formLabelWidth">
                    <el-input v-model="form.Name" placeholder="请输入子分类名称" style="width:60%;"></el-input>
                </el-form-item>
                <el-form-item label="展示顺序：" prop="SortNo" :label-width="formLabelWidth">
                    <el-input v-model.number="form.SortNo" type="number" placeholder="输入数字，数字越小越展示优先" style="width:60%;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save" size="medium">确 定</el-button>
                <el-button @click="dialogFormVisible = false" size="medium">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data(){
            return{
              tableData:[],

              tableData2:[],
              currentPage:1,
              pageSize:10,
              count:0,
              headerbg:'headerbg',//表格头部背景色
              getListUrl:this.urlConfig+'/api/ClassManagement/GetClassManagementList',

              GetSubClassManagementListUrl:this.urlConfig+'/api/ClassManagement/GetSubClassManagementList',
              delUrl:this.urlConfig+'/api/ClassManagement/PostDeleteSubClassManagement',
              addUrl:this.urlConfig+'/api/ClassManagement/PostSubClassManagement',
              editUrl:this.urlConfig+'/api/ClassManagement/PostEditSubClassManagement',
              detailUrl:this.urlConfig+'/api/ClassManagement/GetSubClassManagementById',

              ClassManagementId:'',//顶级Id, 二级sub
              selectedTab:{},
              saveType:'add',
              dialogFormVisible: false,
              formLabelWidth: '25%',
              form: {},
              rules:{
                  Name:[
                      { required: true, message: '请输入子分类名称', trigger: 'blur' },
                  ],
                  SortNo:[
                      { required: true, message: '请输入展示顺序'},
                      { type: 'number', message: '顺序必须为小于51的正整数', min:0 ,max:50}
                  ]
              },
            }
        },
        components: {
        },
        mounted() {
            this.getList(11,1);//一级分类
            this.GetSubClassManagementList(10,this.currentPage,'init');//二级分类
        },
        computed:{
          dialogTitleFun(){
            if(this.saveType=='add'){
              return '新增一级子分类';
            }else if(this.saveType=='edit'){
              return '编辑一级子分类';
            }
          },
          activeIndex(){//当前激活菜单的 index
              for(var i=0;i<this.tableData.length;i++){
                  if(this.tableData[i].Id==this.$route.query.ClassManagementId){
                      return String(i);
                  }
              }
          }
        },
        methods:{
            handleSelect(key, keyPath) {
                var selectedTab = this.tableData[key];
                this.selectedTab = selectedTab;
                if(selectedTab.NameType=='带顶导子分类'){
                    this.ClassManagementId = selectedTab.Id;
                    this.GetSubClassManagementList(10,this.currentPage);
                }else if(selectedTab.NameType=='无子分类'){
                    this.$router.push({ path: '/SortManagement/SortBind' ,query: { id: this.ClassManagementId,subId:'',NameType:0,breadcrumb:[(this.selectedTab.Name+'-'+this.selectedTab.NameType)]} });
                }
            },
            getList:function(PageSize,PageIndex){//一级分类
                this.$http.get(this.getListUrl+'?PageSize='+11+'&PageIndex='+1,{
                    emulateJSON:true
                }).then(function(res){
                    this.tableData = [];
                    if(res.body["Code"] == "200") {
                        this.tableData = JSON.parse(res.body.Data);
                    }
                });
            },
            GetSubClassManagementList:function(PageSize,PageIndex,init){//二级分类
                var ClassManagementId = this.ClassManagementId;
                if(init == 'init'){
                    ClassManagementId= (this.$route.query.ClassManagementId&&this.$route.query.ClassManagementId!='undefined')?this.$route.query.ClassManagementId:'';
                }
                this.$http.get(this.GetSubClassManagementListUrl+'?PageSize='+PageSize+'&PageIndex='+PageIndex+'&Id='+ClassManagementId,{
                    emulateJSON:true
                }).then(function(res){
                    this.count = 0;
                    this.tableData2 = [];
                    if(res.body["Code"] == "200") {
                        this.count = res.body.Count;
                        this.tableData2 = JSON.parse(res.body.Data);
                    }
                });
            },
            Edit:function(row){
                this.saveType='edit';
                this.dialogFormVisible = true;
                this.$http.get(this.detailUrl+'?Id='+row.Id,{
                    emulateJSON:true
                }).then(function(res){
                if(res.body["Code"] == "200") {
                    this.form = JSON.parse(res.body.Data);
                }
                });
            },
            del:function(id){
                this.$confirm('确定需要删除该记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post(this.delUrl+'?Id='+id,{
                        emulateJSON:true
                    }).then(function(res){
                        if(res.body["Code"] == "200") {
                            this.GetSubClassManagementList(10,this.currentPage);
                            this.$notify({title: '成功',message: '删除成功！',type: 'success'});
                        }else{
                            this.$notify({title: '警告',message: res.body["Message"],type: 'warning',duration:1200});
                        }
                    });
                }).catch(() => {});
            },
            into:function(row){
                //跳转绑定页面 this.$route.query.id
                this.$router.push({ path: '/SortManagement/SortBind' ,query: { id:this.ClassManagementId,subId:row.Id,NameType:1,breadcrumb:[(this.selectedTab.Name+'-'+this.selectedTab.NameType),row.Name]} });
            },
            order:function(Id,order){
                this.$http.post(this.editUrl,{Id:Id,SortNo:order},{
                    emulateJSON: true
                }).then(function(res) {
                    console.log(res,'res');
                    if(res.body["Code"] == "200") {
                        this.GetSubClassManagementList(10,this.currentPage);
                    }else{
                        this.$notify.error({title: '错误',message:res.body["Message"]});
                    }
                });
            },
            validateFun:function(){
                var errorInfo='';
                for(var i=0;i<2;i++){
                    this.$refs.form.validateField((['Name','SortNo'][i]),(re)=>{
                        errorInfo+=re+(re==''?'':', ');
                    })
                }
                return errorInfo;
            },
            save:function(){//edit add
                var errorInfo=this.validateFun();
                if(!errorInfo){
                    var postUrl = this.addUrl;
                    if(this.saveType=='edit'){
                    postUrl = this.editUrl;
                    }
                    this.form.ShowImagePath = '1';
                    this.form.ClassManagementId = this.ClassManagementId;
                    this.$http.post(postUrl,this.form,{
                        emulateJSON: true
                    }).then(function(res) {
                        if(res.body["Code"] == "200") {
                            this.dialogFormVisible = false;
                            this.GetSubClassManagementList(10,this.currentPage);
                        }else{
                            this.$notify.error({title: '错误',message:res.body["Message"]});
                        }
                    });
                }else{
                    this.$notify({title: '警告',message: errorInfo,type: 'warning',duration:1200});
                    return false;
                }
            },
            pageSizeChange:function(val){
                this.pageSize = val;
                this.GetSubClassManagementList(val,this.currentPage);
            },
            pageCurrentChange:function(val){
                this.currentPage = val;
                this.GetSubClassManagementList(this.pageSize,val);
            }
        }
    }
</script>
<style>
    .headerbg{
        background-color: #f4f3f3 !important;
    }
</style>
